<script>
//地图组件
import * as types from '@/store/types';
import utils from '@/utils';
import * as mapConfig from '../chartconfig/config/map-config.js';
import { mapGetters } from 'vuex';
import { uuid } from '@ktw/ktools';

const defaultComponents = ['GeoJson', 'TileWMSLayer', 'BaseLayer'];

export default {
  name: 'MapCard',
  props: {
    type: {
      type: String,
      default: '',
    },
    allOptions: {
      type: Array,
      default: () => [],
    },
    isRenderMap: {
      type: Boolean,
      default: true,
    },
    chartId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      defaultComponents: [
        { types: 'NavControl' },
        { types: 'MousePosition' },
        { types: 'GeoJson' },
        { types: 'TileWMSLayer' },
        { types: 'BaseLayer' },
      ],
      renderMapOptions: [],
    };
  },
  computed: {
    ...mapGetters(['removeSublayers', 'currentControl']),
  },
  watch: {
    allOptions(newVal) {
      if (this.isRenderMap) {
        this.clearLayers(newVal);
        this.setMutations(newVal);
      }
    },
    removeSublayers(layers) {
      this.deleteLayerId = layers.name;
      const currentId = this.$store.getters.currentId;
      const mapData = this.$store.getters.controls[currentId];
      if (mapData) {
        for (const key in mapData.options) {
          if (key !== 'TileWMSLayer') {
            let renderMap = mapData.options[key].filter(item => item.subjectId !== layers.name);
            mapData.options[key] = renderMap;
          }
        }
        const deleteType = {
          rendermap() {
            if (this.$refs.RenderMap) this.$refs.RenderMap.onRemove([layers.name]);
          },
          scatter() {
            if (this.$refs.ScatterMap) this.$refs.ScatterMap.onRemove([layers.name]);
          },
          heatmap() {
            if (this.$refs.HeatMap) this.$refs.HeatMap.onRemove([layers.name]);
          },
          TileWMSLayer() {},
        };
        if (layers.types) {
          deleteType[layers.types].call(this);
        }
        this.$store.commit(types.UPDATE_CHART_CONFIG, {
          data: { [currentId]: mapData },
        });
      }
    },
  },
  created() {
    this.mapId = 'map' + uuid(2);
    this.$emit('on-get-mapid', this.mapId);
  },
  mounted() {
    this.setMutations(this.allOptions);
    this.$events.emit('on-getmap', this.$refs.mapcard);
  },
  beforeDestroy() {
    this.clearLayers(this.allOptions);
    this.resetMap();
    // if (this.$store.state[this.mapId]) {
    //   this.$store.unregisterModule(this.mapId);
    // }
  },
  methods: {
    // 获取数据，提交到store
    setMutations(newVal) {
      newVal.forEach(layers => {
        const filterComponents = defaultComponents.filter(item => {
          if (Array.isArray(layers) && layers.length !== 0) {
            if (item === layers[0].types) {
              return item;
            }
          } else {
            if (item === layers.types) {
              return item;
            }
          }
        });
        if (filterComponents.length === 0) {
          if (Array.isArray(layers) && layers.length !== 0) {
            if (this.renderMapOptions.filter(item => item.types === layers[0].types).length === 0) {
              this.renderMapOptions.push(layers[0]);
            } else {
              for (const key in this.renderMapOptions) {
                if (this.renderMapOptions[key].types === layers[0].types) {
                  this.renderMapOptions[key].options = Object.assign(
                    {},
                    this.renderMapOptions[key].options,
                    layers[0].options
                  );
                }
              }
            }
          } else {
            if (layers.data) {
              if (this.renderMapOptions.filter(item => item.types === layers.types).length === 0) {
                this.renderMapOptions.push(layers);
              }
            }
          }
        }
        // 判断组件类型，提交数据
        this.$nextTick(() => {
          this.typeMutation(layers);
        });
      });
    },
    typeMutation(layers) {
      const state = {
        TileWMSLayer() {
          if (Object.keys(layers.data).length !== 0) {
            this.$store.commit(this.mapId + '/SET_MAP_SERVICELIST', layers.data);
          }
        },
        RenderMap() {
          if (Array.isArray(layers)) {
            const renderData = this.setSubCommitData(layers);
            this.$store.commit(this.mapId + '/SET_MAP_DATA_SUBJECT', {
              renderMap: renderData,
            });
          }
        },
        ScatterMap() {
          if (Array.isArray(layers)) {
            const renderData = this.setSubCommitData(layers);
            this.$store.commit(this.mapId + '/SET_MAP_DATA_SUBJECT', {
              scatterMap: renderData,
            });
          }
        },
        HeatMap() {
          if (Array.isArray(layers)) {
            const renderData = this.setSubCommitData(layers);
            this.$store.commit(this.mapId + '/SET_MAP_DATA_SUBJECT', {
              heatMap: renderData,
            });
          }
        },
      };
      if (this.$store.state[this.mapId]) {
        if (Array.isArray(layers)) {
          if (layers[0]) {
            state[layers[0].types].call(this);
          }
        } else {
          state[layers.types].call(this);
        }
      }
    },
    setSubCommitData(layers) {
      const renderData = [];
      layers.forEach(item => {
        renderData.push({
          data: item.data,
          subjectId: item.subjectId,
        });
      });
      return renderData;
    },
    // 清除图层
    clearLayers(allOptions) {
      let renderMapLayer = [];
      if (this.$refs.mapcard) {
        allOptions.forEach(options => {
          if (Array.isArray(options) && options.length !== 0) {
            renderMapLayer = [];
            options.forEach(layers => {
              if (layers.types === options[0].types) {
                renderMapLayer.push(layers.subjectId);
              }
            });
            const removeLayer = {
              RenderMap() {
                if (this.$refs.RenderMap) this.$refs.RenderMap.onRemove(renderMapLayer);
              },
              ScatterMap() {
                if (this.$refs.ScatterMap) this.$refs.ScatterMap.onRemove(renderMapLayer);
              },
              HeatMap() {
                if (this.$refs.HeatMap) this.$refs.HeatMap.onRemove(renderMapLayer);
              },
            };
            removeLayer[options[0].types].call(this);
          }
        });
      }
    },
    resetMap() {
      if (this.$refs.mapcard) {
        this.allOptions.forEach(options => {
          if (options.types === 'TileWMSLayer') {
            const layerName = Object.keys(options.data);
            if (this.$store.state[this.mapId]) {
              this.$store.commit(this.mapId + '/SET_MAP_GOCLAYER_DELETE', layerName);
            }
          }
        });
        // this.$refs.mapcard.$mapObject.remove();
      }
    },
  },
  render(createElement) {
    let mapProps = { mapId: this.mapId };
    const defaultComponents = this.defaultComponents.map(res => {
      return createElement(res.types, {
        ref: res.types,
        props: res.options,
      });
    });
    const renderMap = this.renderMapOptions.map(res => {
      if (res.length !== 0) {
        return createElement(res.types, {
          ref: res.types,
          props: res.options,
        });
      } else {
        return;
      }
    });
    return createElement(
      'BaseMap',
      {
        ref: 'mapcard',
        props: mapProps,
      },
      defaultComponents.concat(renderMap)
    );
  },
};
</script>

<style lang="less" scoped>
</style>
